import React, { Component } from 'react';
import { inject, observer } from "mobx-react";
import { TabPage } from 'weaver-mobile-page';
import './index.less';
import { getRequest } from '../../../common/getRequest';
import isMobile from '../../../utils/mobileDetect';
import TabCont from './TabCont';
import Footer from './Footer';
import { Tools } from 'weaver-mobile';
import { TABKEYS } from '../../../constants/form';

const getLabel = Tools.getLabel; 
const tabs = [{ title: getLabel(523137, '我创建的'), key: TABKEYS.MYCREATE }, { title: getLabel(523169, '共享给我的'), key: TABKEYS.SHAREME}];

@inject('formStore')
@observer
export default class Home extends Component {
  constructor(props) {
    super(props);

    const ismobile = isMobile();
    const { backBtn, openFrom } = getRequest();
    const backBtnAble = !ismobile && backBtn === '1';
    const search = props.location.search;

    window.backBtnAble = backBtnAble;
    window.localStorage.setItem('search', JSON.stringify(search));
    window.localStorage.setItem('openFrom', openFrom || '');

    this.store = props.formStore;
    this.store.init();

    this.state = { tabKey: TABKEYS.MYCREATE };
  }

  tabProps = {
    onChange: (tab) => {
      this.setState({ tabKey: tab.key });
    }
  }; 

  render() {
    const { tabKey } = this.state;
    const { creatGroupid, 
      creatSearchValue, 
      shareGroupid, 
      shareSearchValue, 
      leftDatas,
      changeSearchValue,
      changeGroupId,
      onFillinEnable,
      creatAppLvpStore,
      shareAppLvpStore
    } = this.store;

    return (
      <div className='edc-mobile'>
        <TabPage 
          tabs={tabs}
          tabProps={this.tabProps}
        />
        <TabCont 
          key={`${TABKEYS.MYCREATE}`} 
          visible={tabKey === TABKEYS.MYCREATE}
          _key={`${TABKEYS.MYCREATE}`}
          groupid={creatGroupid}
          searchValue={creatSearchValue}
          leftDatas={leftDatas}
          appLvpStore={creatAppLvpStore}
          changeSearchValue={changeSearchValue}
          changeGroupId={changeGroupId}
          onFillinEnable={onFillinEnable}
        />
        <TabCont 
          key={`${TABKEYS.SHAREME}`} 
          visible={tabKey === TABKEYS.SHAREME} 
          _key={`${TABKEYS.SHAREME}`}
          groupid={shareGroupid}
          searchValue={shareSearchValue}
          leftDatas={leftDatas}
          appLvpStore={shareAppLvpStore}
          changeSearchValue={changeSearchValue}
          changeGroupId={changeGroupId}
          onFillinEnable={onFillinEnable}
        />
        <Footer />
      </div>
    );
  }
}
